<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />

<script src="../js/public/prefixfree.min.js"></script>
<script src="../js/public/jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		/*绑定输入框的监听事件，当输入框内容满足条件时，使按钮可用*/
		$("#btn").attr("disabled", true);
		$("#phone").bind("input propertychange", function() {
			var reg = /^1[3|4|5|7|8][0-9]{9}$/;
			var phone = $("#phone").val();
			if (reg.test(phone)) {
				$("#btn").attr("disabled", false);
				$("#btn").css("background", "#a00");
			} else {
				$("#btn").attr("disabled", true);
				$("#btn").css("background", "#0a0");
			}
		});
		
		$("#btn1").attr("disabled", true);
		$("#r_email").bind("input propertychange", function() {
			var reg1 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
			var r_email = $("#r_email").val();
			if (reg1.test(r_email)) {
				$("#btn1").attr("disabled", false);
				$("#btn1").css("background", "#a00");
			} else {
				$("#btn1").attr("disabled", true);
				$("#btn1").css("background", "#0a0");
			}
		});
	});

	/*显示弹出层*/
	function showDiv() {
		$("#Login_register_Div").css("display", "block");
		$("#fade").css("display", "block");
	}
	/*关闭弹出层*/
	function closeDiv() {
		$("#Login_register_Div").css("display", "none");
		$("#fade").css("display", "none");
		$("input[type='text']").val("");
		$("input[type='password']").val("");
	}

	function showlogin() {
		$("#login_input").css("display", "block");
		$(".login_right_li").css("color", "black");
		$(".register_input").css("display", "none");
		$(".login_left_li").css("color", "#22bb62");
	}

	function showregister() {
		$(".register_input").css("display", "block");
		$("#login_input").css("display", "none");
		$(".login_right_li").css("color", "#22bb62");
		$(".login_left_li").css("color", "black");
	}
	
	function toReg(){
		setTimeout(function(){
			$(".tab-nav li:first").attr("class","");
			$("#tab1").attr("class","");
			$(".tab-nav li:last").attr("class","active");
			$("#tab3").attr("class","active");
		},1000);
	}
</script>

</head>
<body style="background:#999">
	<div>
		<div style="float:right;margin-right:100px">
			<!--a标签调用显示登录框方法-->
			<a id="login_user" onclick="showDiv()">登录/注册</a> 
			<a id="user_info" href="myInfo.jsp" style="display:none">个人中心</a>
		</div>
	</div>

	<!--弹出登录框时的全屏背景层，相当于挡住下面的内容-->
	<div id="fade" class="black_overlay"></div>

	<div id="Login_register_Div" class="login_content"
		style="width:395px;height:590px;background:#999">
		<!--关闭按钮-->
		<div id="move">
			<div class="closeDiv" onclick="closeDiv()">×</div>
		</div>
		<!--关闭按钮-->
		<!--包裹的外框-->
		<div class="w_700">
			<div class="container" style="width:390px;height:500px">
				<div class="tab-group"
					style="width:390px;height:500px;background:#999">
					<!-- 用户名登录 -->
					<section id="tab1" title="用户名登录" style="display:block;">
						<div class="form">
							<form class="login-form">
								<input type="text" placeholder="输入用户名" autocomplete="off" id="username" /> 
								<input type="password" placeholder="输入密码" autocomplete="off" id="password" />
								<button type="button" id="login">登 录</button>
								<p class="message"><span onclick="toReg()">去注册</span></p>
							</form>
						</div>
					</section>
					<!-- 手机号登录 -->
					<section id="tab2" title="&nbsp;手机号登录&nbsp;" style="display:block;">
						<div class="form" id="login1">
							<form class="form-horizontal" role="form">
								<input type="text" class="form-control" id="phone" name="phone" placeholder="输入手机号" autocomplete="off" /> 
								<input type="text" class="form-control" id="code" name="code" autocomplete="off" placeholder="输入验证码"
									style="width:60%" />
								<input type="button" id="btn" name="btn" value="发送验证码" onclick="sendMessage()" autocomplete="off"
									style="width:38%;background-color:#0a0;color:#000" />
								<button type="button" class="btn btn-info" id="lo">登 录</button>
								<p class="message"></p>
							</form>
						</div>
					</section>
					<!-- 新用户注册 -->
					<section id="tab3" title="&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;"
						style="display:block;">
						<div class="form">
							<form class="register-form">
								<input type="text" placeholder="输入用户名" autocomplete="off" id="r_username" /><br>
								<input type="password" placeholder="输入密码" autocomplete="off" id="r_password" /><br>
								<input type="password" placeholder="输入确认密码" autocomplete="off" id="r_confirmpassword" /><br> 
								<input type="text" autocomplete="off" placeholder="输入手机号" id="r_phone" /><br> 
								<input autocomplete="off" type="text" placeholder="输入电子邮箱" id="r_email" /><br> 
								<input autocomplete="off" type="text" class="form-control" id="code1" name="code" 
								placeholder="输入验证码" required style="width:60%" /> 
								<input autocomplete="off" type="button" id="btn1" name="btn" value="发送验证码" onclick="sendEmailMessage()"
								style="width:38%;background-color:#0a0;color:#000" />
								<button type="button" id="create">注 册</button> <br>
								<p class="message"></p>
							</form>
						</div>
					</section>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/public/jquery-tab.js"></script>
	<script type="text/javascript">
		$(function() {
			// Calling the plugin
			$('.tab-group').tabify();
		});
	</script>
	<script type="text/javascript">
	
		function check_login() {
		/*检查登录的用户名、密码正确性*/
		var name = $("#username").val();
		var pass = $("#password").val();
			if (name == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab1 .message").html("请输入用户名");
				return;
			}
			if (pass == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab1 .message").html("请输入密码");
				return;
			}			
			user_login();
			$("#username").val("");
			$("#password").val("");
		}
	
		function user_login() {
		/* 用户登录交互 */
		var name = $("#username").val();
		var pass = $("#password").val();
			$.ajax({
				url : "${pageContext.request.contextPath }/userLogin.action",
				method : "post",
				async : true,
				data : {
					"username" : name,
					"password" : pass
				},
				success : function(result) {
					if (result == "密码正确") {
						closeDiv();
						$("#login_user").html(name);
						$("#login_user").removeAttr("onclick");
						$("#user_info").css("display","inline");
					}
				}
			});
		}
	
		
		function check_register() {
		/* 检查注册的用户名、密码、手机号、邮箱的正确性*/
		var r_name = $("#r_username").val();
		var r_pass = $("#r_password").val();
		var r_confirmpass = $("#r_confirmpassword").val();
		var r_phone = $("#r_phone").val();
		var r_email = $("#r_email").val();
			if (r_name == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("请输入用户名");
				return;
			} else {
				var reg = /^[a-zA-z]\w{2,9}$/;
				if (!reg.test(r_name)) {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab3 .message").html("请输入正确的用户名:字母、数字、下划线组成，字母开头，3-10位。");
					return;
				}
			}
			if (r_pass == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("请输入密码");
				return;
			} else {
				var reg = /^[a-zA-z]\w{5,15}$/;
				if (!reg.test(r_pass)) {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab3 .message").html("请输入正确的密码:字母、数字、下划线组成，字母开头，6-16位。");
					return;
				}
			}
			if (r_confirmpass == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("请输入确认密码");
				return;
			} else {
				var reg = /^[a-zA-z]\w{5,15}$/;
				if (!reg.test(r_confirmpass)) {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab3 .message").html("请输入正确的密码:字母、数字、下划线组成，字母开头，6-16位。");
					return;
				}
			}
			if (r_pass != r_confirmpass) {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("确认密码不一致,请重新输入");
				return;
			}
			if (r_phone == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("请输入手机号");
				return;
			} else {
				var reg = /^1[3|4|5|7|8][0-9]{9}$/;
				if (!reg.test(r_phone)) {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab3 .message").html("请输入正确的手机号");
					return;
				}
			}
			if (r_email == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("请输入邮箱3");
				return;
			} else {
				var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
				if (!reg.test(r_email)) {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab3 .message").html("请输入正确的邮箱");
					return;
				}
			}
		}
	
		function user_register() {
			/* 新用户注册 交互 */
			var r_name = $("#r_username").val();
			var r_pass = $("#r_password").val();
			var r_phone = $("#r_phone").val();
			var r_email = $("#r_email").val();
			var user = {"u_account":r_name,"u_pass":r_pass,"userInfo":{"u_phoneNum":r_phone,"u_email":r_email}};		
			$.ajax({
				url : "${pageContext.request.contextPath }/userRegister.action",
				type : "post",
				async : true,
				contentType:"application/json;charset=utf-8",
				data : JSON.stringify(user),/*从一个对象中解析出字符串*/		
				success : function(data) {
					$("#tab3 .message").html(data.result);
					$("input[type='text']").val("");
					$("input[type='password']").val("");
					if(data.result == "注册成功!"){
						/*注册成功延时一秒跳转至登录界面	*/
						setTimeout(function(){
							$(".tab-nav li:last").attr("class","");
							$("#tab3").attr("class","");
							$(".tab-nav li:first").attr("class","active");
							$("#tab1").attr("class","active");
						},1000);
					}
				},
			});
		};
	
		$(function() {
			$("#create").click(function() {
				check_register();
			});
	
			$("#login").click(function() {
				check_login();
			});
		});
	</script>
	<!-- 发送验证码，处理。。。 -->
	<script type="text/javascript">
		var InterValObj; //timer变量，控制时间
		var count = 60; //间隔函数，1秒执行
		var curCount; //当前剩余秒数
		var phone = $("#phone").val();
		function sendMessage() {
			curCount = count;
			if (phone == "") {
				$("#tab2 .message").html("请输入手机号");
				return;
			}
			$("#btn").attr("disabled", "true");
			$("#btn").val(curCount + "秒后可重新发送");
			InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
		}
	
		//timer处理函数
		function SetRemainTime() {
			if (curCount == 0) {
				window.clearInterval(InterValObj); //停止计时器
				$("#btn").removeAttr("disabled"); //启用按钮
				$("#btn").val("重新发送验证码");
			} else {
				curCount--;
				$("#btn").val(curCount + "秒后可重新发送");
			}
		}
	</script>
	<!-- 发送邮件验证码-->
	<script type="text/javascript">
		var InterValObj1; //timer变量，控制时间
		var count1 = 60; //间隔函数，1秒执行
		var curCount1; //当前剩余秒数
		function sendEmailMessage() {
			var curemail = $("#r_email").val();
			curCount1 = count1;
			if (curemail == "") {
				$("#tab3 .message").html("请输入邮箱");
				return;
			}
			$("#btn1").attr("disabled", "true");
			$("#btn1").val(curCount1 + "秒后可重新发送");
			InterValObj = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
		}
	
		//timer处理函数
		function SetRemainTime1() {
			if (curCount1 == 0) {
				window.clearInterval(InterValObj1); //停止计时器
				$("#btn1").removeAttr("disabled"); //启用按钮
				$("#btn1").val("重新发送验证码");
			} else {
				curCount1--;
				$("#btn1").val(curCount1 + "秒后可重新发送");
			}
		}
	</script>
	<script type="text/javascript">
		var sms = "";
		$("#btn").click(function() {
			var phone = $("#phone").val();
	
			if (phone != "") {
				$.ajax({
					url : "${pageContext.request.contextPath }/sendSMS.action",
					type : "post",
					data : {
						"phone" : phone
					},
					success : function(result) {
						sms = result;
					}
				});
			} else {
	
				$("#tab2 .message").html("请输入手机号");
				return false;
			}
		});
		$("#lo").click(function() {
			var code = $("#code").val();
			var phone = $("#phone").val();
			if (phone == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab2 .message").html("请输入手机号");
			} else {
				if (code == "") {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab2 .message").html("请输入验证码");
				} else {
					if (sms == code) {
						window.location.href = "success.jsp";
					} else {
						$("#tab2 .message").html("验证码错误");
					};
					/* $("#phone").val(""); */
					$("#code").val("");
				};
			}
		});
	</script>
	<script type="text/javascript">
		var sms1 = "";
		$("#btn1").click(function() {		
			var email = $("#r_email").val();
			if (email != "") {
				$.ajax({
					url : "${pageContext.request.contextPath }/sendEmail.action",
					type : "post",
					data : {
						"email" : email
					},
					success : function(result) {
						sms1 = result;
					}
				});
			} else {
				$("#tab3 .message").html("请输入邮箱1");
				return false;
			}
		});
		$("#create").click(function() {
			var code1 = $("#code1").val();
			var email = $("#r_email").val();
			if (email == "") {
				$(".form").removeClass('shake_effect');
				setTimeout(function() {
					$(".form").addClass('shake_effect')
				}, 1);
				$("#tab3 .message").html("请输入邮箱");
			} else {
				if (code1 == "") {
					$(".form").removeClass('shake_effect');
					setTimeout(function() {
						$(".form").addClass('shake_effect')
					}, 1);
					$("#tab3 .message").html("请输入验证码");
				} else {
					if (sms1 == code1) {
						user_register();
					} else {
						$("#tab3 .message").html("验证码错误");
						$("#code1").val("");
					};
				};
			}
		});
	</script>
</body>
</html>